<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
      <el-form-item>
        <!-- <el-button @click="handleQuery">新增</el-button> -->
        <el-button @click="handleQuery">保存</el-button>
        <el-button @click="department">科室</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <SetUserSelect
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="100"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      :key="keys"
    ></SetUserSelect>
    <el-dialog
      v-model="dialogVisible"
      title="科室"
      width="40%"
      :before-close="handleClose"
    >
      <el-transfer
        v-model="selectedList"
        :titles="['未选科室', '已选科室']"
        :props="{
          key: 'id',
          label: 'name',
        }"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请选择"
        :data="dataLists"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisibleFun"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { addHospital, getCityTree, hospitalById, eitHhospital } from "@/api/basicManagement/hospital";
import { departmentList as getList } from "@/api/basicManagement/departmentMana";
import { watch, getCurrentInstance, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import data from "./data";
const dialogVisible = ref(false)
const tableColumns = ref([
  { type: "checkbox", width: 60, fixed: null },
  { field: "name", title: "科室" },
])
let selectedList = ref([])
const dataLists = ref([])
const route:any = useRoute();
const { bill, datas } = data;
let keys = ref<number>(0);
const { proxy } = getCurrentInstance();
let proxys: any = proxy;
const { new_hospital_level, new_hospital_type, new_hospital_status } = proxys.useDict("new_hospital_level", "new_hospital_type", "new_hospital_status");
watch(
  new_hospital_level,
  (newV, oldV) => {
    bill.value[1].selectData = new_hospital_level.value;
    keys.value = new Date().getTime();
  }
);
watch(
  new_hospital_type,
  (newV, oldV) => {
    bill.value[2].selectData = new_hospital_type.value;
    keys.value = new Date().getTime();
  }
);
// watch(
//   new_hospital_status,
//   (newV, oldV) => {
//     bill.value[6].selectData = new_hospital_status.value;
//     keys.value = new Date().getTime();
//   }
// );

const handleQuery = function (): void {
  proxys.$refs.setUserSelect.submitForm().then((val) => {
    (route.query.id? eitHhospital : addHospital)({
      ...val,
      province: val.provinceList[0],
      city:val.provinceList[1],
      area:val.provinceList?.[2]??'',
      departmentList: departmentList.value,
      // provinceList: undefined
    }).then(() => {
      proxys.$modal.msgSuccess(`${route.query.id? '修改' : '新增'}成功`);
      datas.value = {}
      const obj = { path: "/basicInformation/medicalList" };
      proxys.$tab.closeOpenPage(obj);
    })
  })
};
const defaultchecked = ref([])
const initGetCityTree = () => {
  getCityTree().then((response) => {
    bill.value[3].selectData = response.data;
    keys.value = new Date().getTime();
    if (route.query.id) {
      hospitalById(route.query.id).then((res) => {
        datas.value = res.data
        datas.value.provinceList =  res.data.area? [res.data.province, res.data.city, res.data.area]:[res.data.province, res.data.city]
        keys.value = new Date().getTime();
      })
    }
    // this.baseCityList = this.handleTree(response.data, "id", "pid")
    // this.baseCityList = this.setTreeData(response.data, 'children')
  })
}
initGetCityTree()
const orderSelect = ref([
  {
    label: '名称',
    model: 'name',
    placeholder: '请输入',
    type: 'input'
  }
])
const paginationParams = ref({
  total: 0,
  pageNum: 1,
  pageSize: 1000,
})

const department = () => {
  getList(paginationParams.value).then((res:any): void => {
    dataLists.value = res.rows
    datas.value.departmentList?.length && datas.value.departmentList.forEach((items) => {
      selectedList.value.push(items.departmentId)
    })
    dialogVisible.value = true
  })
  
}
const handleClose = () => {
  dialogVisible.value = false
}
const departmentList = ref([])
const dialogVisibleFun = () => {
  departmentList.value = []
  selectedList.value.length &&  dataLists.value.forEach((item) => {
    if (selectedList.value.includes(item.id)) {
      departmentList.value.push({
      departmentId: item.id,
      departmentName: item.name,
      departmentNumber: item.number
    })
    }
  })
  dialogVisible.value = false
}

// 选择表格
const filterMethod = (query, item) => {
  return item.name.includes(query)
  // Id.value = val.currentItem.id
  // this.form.customerId = val.currentItem.customerId;
}
if (route.query.type) {
  datas.value = {
    status: '1'
  }
}
</script>
<style scoped>
.pad_10 {
  padding: 10px;
}
.pad_10 .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>